// 用户管理-用户列表
import { Card, Table, Space, Button, message } from "antd"
import { useState, useEffect } from "react"
import PageHeaderWrapper from "@/components/pageHeaderWrapper"
import "./index.less"

function Users() {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(false)

  // 定义表格列
  const columns = [
    {
      title: "用户名",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "邮箱",
      dataIndex: "email",
      key: "email",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" onClick={() => handleView(record)}>
            查看
          </Button>
          <Button type="link" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Button type="link" danger onClick={() => handleDelete(record)}>
            删除
          </Button>
        </Space>
      ),
    },
  ]

  // 模拟获取用户数据
  const fetchUsers = async () => {
    setLoading(true)
    try {
      // 这里替换为实际的 API 调用
      const response = await fetch("your-api-endpoint")
      const data = await response.json()
      setUsers(data)
    } catch (error) {
      message.error("获取用户列表失败")
    } finally {
      setLoading(false)
    }
  }

  // 处理查看、编辑、删除操作
  const handleView = (record) => {
    console.log("查看用户:", record)
  }

  const handleEdit = (record) => {
    console.log("编辑用户:", record)
  }

  const handleDelete = (record) => {
    console.log("删除用户:", record)
  }

  const handleAddUser = () => {
    console.log("新增用户")
  }

  useEffect(() => {
    fetchUsers()
  }, [])

  return (
    <>
      <PageHeaderWrapper title="用户管理" subtitle="用户列表" />
      <section className="G-main P-users">
        <Card
          title="用户列表"
          extra={
            <Button type="primary" onClick={() => handleAddUser()}>
              新增用户
            </Button>
          }
        >
          <Table
            columns={columns}
            dataSource={users}
            loading={loading}
            rowKey="id"
            pagination={{
              defaultPageSize: 10,
              showSizeChanger: true,
              showTotal: (total) => `共 ${total} 条记录`,
            }}
          />
        </Card>
      </section>
    </>
  )
}

export default Users
